<template>
  <el-button type="primary" @click="on">冒泡排序</el-button>
  <el-button type="primary" @click="off">插入排序</el-button>
  <div class="container1" v-if="isShow">
    <div>此为冒泡排序小测验</div>
    <transition-group name="list" tag="div">
      <div class="arrayContainer">
        <div
          v-for="(item, index) in arr"
          :key="item.value"
          :style="{ height: item.len, width: '50px', backgroundColor: item.color }"
          class="child"
        >
          <div class="numb">
            {{ item.value }}
          </div>
        </div>
      </div>
    </transition-group>

    <!-- 输入框和确定按钮 -->
    <div class="input-container">
      <el-input v-model="input1" placeholder="请输入第一个数字" style="width: 150px; margin-right: 10px;"></el-input>
      <el-input v-model="input2" placeholder="请输入第二个数字" style="width: 150px; margin-right: 10px;"></el-input>
      <el-button type="primary" @click="checkStep">确定</el-button>
    </div>

    <div>
      {{ str }}
    </div>
  </div>
  

  <!--  -->
  <!-- 插入排序 -->
  <div class="container2" v-else>
    <div>此为插入排序小测验</div>
    <transition-group name="list" tag="div">
      <div class="arrayContainer">
        <div
          v-for="(item, index) in arr_insert"
          :key="item.value"
          :style="{ height: item.len, width: '50px', backgroundColor: item.color }"
          class="child"
          @click="choose(index)"
        >
          <div class="numb">
            {{ item.value }}
          </div>
        </div>
      </div>
    </transition-group>

    <div v-if="jud_choose === 1">请选择待插入的数字</div>
    <div v-else>请选择与其比较的数字</div>
    <div>{{ str_show_what_choose }}</div>
    <div>{{ reminder }}</div>

    <div v-if="whether_show_choose_change">
      是否要进行交换
      <el-button type="primary" @click="on_insert">是</el-button>
      <el-button type="primary" @click="off_insert">否</el-button>
    </div>

    <!-- 输入框和确定按钮 -->
    <!-- <div class="input-container">
      <el-input v-model="input1" placeholder="请输入第一个数字" style="width: 150px; margin-right: 10px;"></el-input>
      <el-input v-model="input2" placeholder="请输入第二个数字" style="width: 150px; margin-right: 10px;"></el-input>
      <el-button type="primary" @click="checkStep">确定</el-button>
    </div> -->

    <!-- <div>
      {{ str }}
    </div> -->
  </div>
</template>

<script setup>
  import { index } from 'd3'
import { arrowMiddleware } from 'element-plus'
import { ref } from 'vue'
  
  const jud_choose = ref(1)

  const str_show_what_choose = ref('')
  const reminder = ref('')
  const know_which_one = ref(0)
  const know_which_one_comparison = ref(0)

  const whether_show_choose_change = ref(false)
  const whether_change = ref('')
  
  const on_insert = async() => {
    whether_change.value = true

    if (resolvePromise){
      resolvePromise(true)
      resolvePromise = null
    }
  }
  const off_insert = async() => {
    whether_change.value = false

    if (resolvePromise){
      resolvePromise(false)
      resolvePromise = null
    }
  }
  
  let resolvePromise = null
  const continue_app = async() => {
    return new Promise((resolve) => {
      resolvePromise = resolve
    })
  }

  // const change_yes_or_not = ref('')
  // const answer_right_or_wrong = ref('')

  // [7, 3, 5, 1, 8, 2, 4, 6]
  // 初始数组
  const arr_insert = ref([
    { value: 7, len: '210px', color: '#6FD8D6' },
    { value: 3, len: '90px', color: '#6FD8D6' },
    { value: 5, len: '150px', color: '#6FD8D6' },
    { value: 1, len: '30px', color: '#6FD8D6' },
    { value: 8, len: '240px', color: '#6FD8D6' },
    { value: 2, len: '60px', color: '#6FD8D6' },
    { value: 4, len: '120px', color: '#6FD8D6' },
    { value: 6, len: '180px', color: '#6FD8D6' }])

  // 插入排序
  const choose = async(index) => {
    // console.log(arr_insert.value.length)
    if (jud_choose.value === 1) {
      if (index == know_which_one.value){
        if (know_which_one.value !== 0) {
          reminder.value = '正确选择了待插入的数，请选择做比较的数'
          know_which_one.value = know_which_one.value + 1
          console.log(know_which_one.value)
          jud_choose.value = 2
          know_which_one_comparison.value = index
          console.log(know_which_one_comparison.value)
          console.log(jud_choose.value)
          arr_insert.value[index].color = '#FFFF00'
        }else{
          (async() => {
            arr_insert.value[0].color = '#FFFF00'
            await new Promise((resolve) => setTimeout(resolve, 1000));
            arr_insert.value[0].color = '#6FD8D6'
          })()
          reminder.value = '正确选择了待插入的数，由于是第一个数，默认放在开头，请选择下一个待插入的数字'
          know_which_one.value = know_which_one.value + 1
          console.log(know_which_one.value)
        }
      }else{
        (async() => {
            arr_insert.value[index].color = '#F07979'
            await new Promise((resolve) => setTimeout(resolve, 300));
            arr_insert.value[index].color = '#6FD8D6'
        })()

        reminder.value = '错啦'
      }
    } else {
      if (know_which_one_comparison.value > 1){
        if (index == know_which_one_comparison.value - 1){
          reminder.value = '正确选择需要做比较的数..'
          arr_insert.value[index].color = '#87CEFA'

          whether_show_choose_change.value = true

          const user_decision  = ref('')
          user_decision.value = await continue_app()

          let change_yes_or_not = false
          let answer_right_or_wrong = false

          if (arr_insert.value[index].value > arr_insert.value[index + 1].value){
            change_yes_or_not = true
          }else{
            change_yes_or_not = false
            jud_choose.value = 1
          }

          if (user_decision.value == change_yes_or_not){
            answer_right_or_wrong = true
            console.log(change_yes_or_not)
            if (change_yes_or_not == true){
              reminder.value = '正确选择是否交换，请选择下一个进行比较的数'
            }else{
              reminder.value = '正确选择是否交换，请选择下一个待插入的数'
              if (know_which_one == arr_insert.value.length){
                reminder.value = '排序完成'
              }
            }
            
          }else{
            answer_right_or_wrong = false
            if (change_yes_or_not == true){
              reminder.value = '选择错误，应该进行交换，请选择下一个进行比较的数'
            }else{
              reminder.value = '选择错误，不应该进行交换，请选择下一个待插入的数'
              // jud_choose.value = 1
              if (know_which_one == arr_insert.value.length){
                reminder.value = '排序完成'
              }
            }
          }

          if (change_yes_or_not === true){
            console.log(arr_insert.value[index])
            console.log(arr_insert.value[index+1])
            let temp_memory = arr_insert.value[index + 1]
            arr_insert.value[index + 1] = arr_insert.value[index]
            arr_insert.value[index] = temp_memory
            console.log(arr_insert.value[index])
            console.log(arr_insert.value[index+1])
            whether_show_choose_change.value = false
          }else{
            whether_show_choose_change.value = false
          }

          (async() => {
            await new Promise((resolve) => setTimeout(resolve, 300));
            if (change_yes_or_not == false){
              arr_insert.value[index].color = '#6FD8D6'
              arr_insert.value[index + 1].color = '#6FD8D6'
            }else{
              arr_insert.value[index + 1].color = '#6FD8D6'
            }
          })()

          know_which_one_comparison.value = know_which_one_comparison.value - 1
        }else{
          (async() => {
            arr_insert.value[index].color = '#F07979'
            await new Promise((resolve) => setTimeout(resolve, 300));
            arr_insert.value[index].color = '#6FD8D6'
          })()

          reminder.value = '错了，请重新选择'
        }
      }else{
        if (index == know_which_one_comparison.value - 1){
          arr_insert.value[0].color = '#87CEFA'
          reminder.value = '正确选择需要做比较的数1'
          whether_show_choose_change.value = true
          // await delay(1)
          
          const user_decision  = ref('')
          console.log('hello')
          user_decision.value = await continue_app()
          console.log(user_decision)

          // /////////////////

          let change_yes_or_not = false
          let answer_right_or_wrong = false
          
          console.log(arr_insert.value[index].value)
          console.log(arr_insert.value[index + 1].value)

          if (arr_insert.value[index].value > arr_insert.value[index + 1].value){
            change_yes_or_not = true
          }else{
            change_yes_or_not = false
          }

          console.log('user_decision.value')
          console.log(user_decision.value)
          console.log('change_yes_or_not')
          console.log(change_yes_or_not)
          
          if (user_decision.value == change_yes_or_not){
            answer_right_or_wrong = true
            console.log(change_yes_or_not)
            reminder.value = '正确选择是否交换，请选择下一个待插入的数字'
          }else{
            answer_right_or_wrong = false
            if (change_yes_or_not == true){
              reminder.value = '选择错误，应该进行交换，请选择下一个待插入的数'
            }else{
              reminder.value = '选择错误，不应该进行交换，请选择下一个待插入的数'
            }

            //reminder.value = '选择错误，请重新选择是否交换'  //怎么实现重新选择？
          }

          // /////////////
          
          console.log('answer_right_or_wrong')
          console.log(answer_right_or_wrong)

          if (change_yes_or_not === true){
            console.log(arr_insert.value[index])
            console.log(arr_insert.value[index+1])
            let temp_memory = arr_insert.value[index + 1]
            arr_insert.value[index + 1] = arr_insert.value[index]
            arr_insert.value[index] = temp_memory
            console.log(arr_insert.value[index])
            console.log(arr_insert.value[index+1])
            whether_show_choose_change.value = false
          }else{
            whether_show_choose_change.value = false
          }

          (async() => {
            await new Promise((resolve) => setTimeout(resolve, 500));
            arr_insert.value[index].color = '#6FD8D6'
            arr_insert.value[index + 1].color = '#6FD8D6'
          })()

          jud_choose.value = 1

          if (know_which_one == len(arr_insert) - 1){
            reminder.value = '完成排序'
          }
          
        }else{
          reminder.value = '错了，请重新选择'
          (async() => {
            arr_insert.value[index].color = '#F07979'
            await new Promise((resolve) => setTimeout(resolve, 500));
            arr_insert.value[index].color = '#6FD8D6'
          })()
        }

      }
    }
    str_show_what_choose.value = index+1
  }


const yes_or_not = async(index) => {
  let change_yes_or_not = false
  let answer_right_or_wrong = false
  
  if (arr_insert.value[index] > arr_insert.value[index + 1]){
    change_yes_or_not = true
  }else{
    change_yes_or_not = false
  }

  
  if (whether_change.value === change_yes_or_not){
    answer_right_or_wrong === true
    console.log(change_yes_or_not)
  }else{
    reminder.value = '选择错误，请重新选择是否交换'
  }

  return change_yes_or_not , answer_right_or_wrong
}

  // 插入排序
  // 初始数组
  // let arr = ref([
  //   { value: 5, len: '62.10526315789473px', color: '#6FD8D6' },
  
  
  
  
  
  
  
  
  // 冒泡排序
  // 初始数组
  let arr = ref([
    { value: 5, len: '62.10526315789473px', color: '#6FD8D6' },
    { value: 22, len: '205.26315789473685px', color: '#6FD8D6' },
    { value: 38, len: '340px', color: '#6FD8D6' },
    { value: 10, len: '104.21052631578947px', color: '#6FD8D6' }
  ])
  let arr1 = [[5,22],[22,38],[38,10],[5,22],[22,10],[5,10]]
  let temp = 0;
  // 输入框的值
  const isShow = ref(true)
  const input1 = ref('')
  const input2 = ref('')
  // 提示信息
  const str = ref("")
  const on = () => isShow.value = true
  const off = () => isShow.value = false
  // 检查用户输入的步骤是否正确
  function checkStep() {
    const one = (element) => element.value ===arr1[temp][0];
    let oneIndex = arr.value.findIndex(one)
    console.log(oneIndex);
    
    const two = (element) => element.value ===arr1[temp][1];
    let twoIndex = arr.value.findIndex(two)
    // 判断用户输入是否正确
    if (parseInt(input1.value) === arr1[temp][0] && parseInt(input2.value) === arr1[temp][1]) {
      // 判断是否需要交换
      if (arr1[temp][0]> arr1[temp][1]) {
        // 交换两个数字
        console.log(arr.value[oneIndex]);
        console.log(arr.value[twoIndex]);
        
        ;[arr.value[oneIndex], arr.value[twoIndex]] = [arr.value[twoIndex], arr.value[oneIndex]]
        str.value = `步骤正确，${arr1[temp][0]} 和 ${arr1[temp][1]} 已交换`
      } else {
        str.value = `步骤正确，${arr1[temp][0]} 和 ${arr1[temp][1]} 不需要交换`
      }
      // 移动到下一对数字
      temp++
      // 如果当前步骤完成，重置索引
      if (temp >= arr1.length ) {
        str.value = "恭喜！本轮比较完成！"
      }
    } else {
      str.value = "输入错误，请重新输入"
    }

    // 清空输入框
    input1.value = ''
    input2.value = ''
  }

</script>

<style scoped>
.container1{
  width: 100%;
  height: 100%;
}
.container2{
  width: 100%;
  height: 100%;
}
.arrayContainer {
  width: 80vw;
  height: 400px;
  background-color: whitesmoke;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-left: 50px;
  margin-top: 50px;
  border: 5px solid grey;
  border-radius: 10px;
}

.list-move {
  transition: transform 1s;
}

/* 当元素被移除时应用的类 */
.list-leave-active {
  transition: all 0.5s;
}

/* 当元素被添加时应用的类 */
.list-enter-active {
  transition: all 0.5s;
}

/* 离开过渡的起始状态 */
.list-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 进入过渡的结束状态 */
.list-enter {
  transform: translateX(-100%);
  opacity: 0;
}

.numb {
  width: 100%;
  height: 20px;
  text-align: center;
  margin: 0 auto;
  bottom: 0;
  border-radius: 5px 5px 0 0;
  border: none;
}

.child {
  border-radius: 5px 5px 0 0;
}

.input-container {
  margin-top: 20px;
  margin-left: 50px;
  display: flex;
  align-items: center;
}
</style>